<template>
  <div>
    <div>
      <el-input style="width: 200px" placeholder="请输入评论内容"
                v-model="comment_content"></el-input>
      <el-button style="margin: 5px; color: cadetblue" @click="search">搜索</el-button>
      <el-button style="margin-left: 0; color: #c5b8a5" @click="reset">重置</el-button>
    </div>

    <div style="margin: 10px 0">
    </div>

    <!--    展示所有解决方案信息表格-->
    <el-table :data="tableData" border stripe :header-cell-style="{backgroundColor: '#F2F2E6'}">
      <el-table-column align="center" prop="id" label="ID" width="100"></el-table-column>
      <el-table-column align="center" prop="userId" label="用户id" width="100"></el-table-column>
      <el-table-column align="center" prop="content" label="内容"></el-table-column>
      <el-table-column align="center" prop="createTime" label="发布时间" width="200"></el-table-column>
      <el-table-column align="center" prop="detail" label="详情" width="150">
        <template slot-scope="scope">
          <a-button style="color: cornflowerblue" @click="view(scope.row)">查看<a-icon type="eye" /></a-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-popconfirm
            style="margin-left: 8px"
            confirm-button-text='确定'
            cancel-button-text='取消'
            icon="el-icon-info"
            icon-color="#a27e7e"
            title="确定屏蔽该评论吗？"
            @confirm="back(scope.row)"
          >
            <a-button style="color: indianred" slot="reference">屏蔽<a-icon type="highlight" /></a-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 10px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog title="评论详情" :visible.sync="viewDialogVis" width="60%" >
      <el-descriptions class="margin-top" :column="1" border>
        <el-descriptions-item
          label="评论用户"
          label-style="text-align: center; width: 170px; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
          {{comment.userId}}
        </el-descriptions-item>
        <el-descriptions-item
          label="对应创意"
          label-style="text-align: center; width: 170px; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
          {{comment.creativeId}}
        </el-descriptions-item>
        <el-descriptions-item
          label="父评论id"
          label-style="text-align: center; width: 170px; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
          {{comment.pid}}
        </el-descriptions-item>
        <el-descriptions-item
          label="最上级id"
          label-style="text-align: center; width: 170px; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
          {{comment.originId}}
        </el-descriptions-item>
        <el-descriptions-item
          label="评论内容"
          label-style="text-align: center; width: 170px; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
          {{comment.content}}
        </el-descriptions-item>
        <el-descriptions-item
          label="评论时间"
          label-style="text-align: center; width: 170px; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
          {{comment.createTime}}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Creative_Comment",
  data(){
    return{
      tableData: [], //表格数据
      total: 0, //总数
      pageNum: 1, //当前页
      pageSize: 5, //每页条数
      viewDialogVis: false,
      comment_content: '', //评论内容
      search_comment_content: '', //搜索评论内容
      comment: {},
    }
  },
  created() {
    this.load()
  },
  methods:{
    view(comment) {
      this.comment = comment
      this.viewDialogVis = true
    },
    handleSizeChange(pageSize) { //更改每页条数
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) { //翻页
      this.pageNum = pageNum
      this.load()
    },

    load() { // 请求分页查询
      request.get("/c-comment/adminGet", {
        params: {
          PageNum: this.pageNum,
          PageSize: this.pageSize,
          content: this.search_comment_content
        }
      }).then(res => {
        if (res.data !== null) {
          this.tableData = res.data.list
          this.total = res.data.total
        } else {
          this.tableData=[]
          // this.sendWarnMessage('没有搜索结果！')
        }
      })
    },
    search() { //搜索
      this.search_comment_content = this.comment_content
      this.load()
    },

    back(comment) { //屏蔽
      request.post('/c-comment/processComment',{'id': comment.id}).then(res => {
        if(res.code === '200') {
          let message = {}
          message.userId = comment.userId
          message.content = '您的评论存在违规内容，已被屏蔽（如有疑问请联系管理员289812618@qq.com）'
          message.statement = '未读'
          request.post('/message',message).then(res => {
            if(res.code === '200') {
              this.sendSuccessMessage('已通知用户')
            } else {
              this.sendWarnMessage('通知用户失败')
            }
          })
          this.sendSuccessMessage('屏蔽成功')
          this.load()
        } else {
          this.sendWarnMessage('屏蔽失败')
        }
      })
    },

    reset() { //重置搜索
      this.comment_content = ''
      this.search_comment_content = ''
      this.load()
    },
  }
}
</script>

<style scoped>

</style>
